<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content search_form paln_info_show">
      <e-heading style="margin-bottom:50px;">{{$route.query.classname}}{{title}}</e-heading>
      <!--教学信息-->
      <div class="plan_infocont" v-if="informationData.value">
        <div class="plan_show_title">
          <e-cellbox middle class="title-manage">
            <e-cell-item class="planlft">
              <div class="plan_stitle"><span>教学信息</span><i></i></div>
            </e-cell-item>
            <e-cell-item>
              <el-button type="text" :class="['edit_ico', {planbtn_normal: isEditTeachingInformation}]" icon="edit" @click="handleEditTeachingInformation" v-if="$route.query.state == '1'">编辑</el-button>
            </e-cell-item>
          </e-cellbox>
        </div>
        <div v-if="!isEditTeachingInformation && isTeachingInformationState === 'edit'">
          <div class="tem_cont">
            <el-row v-for="(item, index) in informationData.list" :key="index" v-if="item.value">
              <el-col :span="3" v-if="informationData.value">
                <b>{{item.name}}</b>
              </el-col>
              <el-col :span="21" v-if="!item.isCode">
                <el-row v-for="(sitem, sindex) in item.list" :key="sindex" v-if="sitem.value">
                  <el-col :span="2">
                    {{sitem.name}}
                  </el-col>
                  <el-col :span="22">
                    <div v-if="sitem.type == 'checkbox'" class="tem_eol">
                      {{sitem.valueData.join('、')}}
                    </div>
                    <div v-if="sitem.type == 'number'" class="tem_eol">
                      {{sitem.valueData}} {{sitem.unit}} 
                    </div>
                    <div v-if="sitem.type == 'radio'" class="tem_eol">
                      {{sitem.valueData}}
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="21" v-else>
                <div v-if="item.type == 'textarea'" v-html="handleFormatTextrea(item.valueData)"></div>
                <div v-if="item.type == 'checkbox'">
                  {{item.valueData.join('、')}}
                </div>
                <div v-if="item.type == 'number'">
                  {{sitem.valueData}} {{sitem.unit}} 
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--编辑教学信息-->
        <div v-if="isEditTeachingInformation">
          <teaching-information-edit @cancelInformationEdit="handleCancelInformationEdit" :informationdata="informationData" :isTeachingInformationState="isTeachingInformationState" :editId="editId"></teaching-information-edit>
        </div>
        <!--无教学信息-->
        <e-placeholder
          v-if="!isEditTeachingInformation && isTeachingInformationState === 'add'"
          :src="'/static/images/training/no_plan.png'" 
          :text="'点击编辑来填写教学信息吧！'" style="width:800px;">
        </e-placeholder>
      </div>
      <!--教学过程-->
      <div class="plan_infocont">
        <div class="plan_show_title" id="course_title">
          <e-cellbox middle class="title-manage">
            <e-cell-item class="planlft">
              <div class="plan_stitle"><span>教学过程</span><i></i></div>
            </e-cell-item>
            <e-cell-item>
              <el-button type="text" :class="['edit_ico', {planbtn_normal: isaddTeachingCourse}]" icon="plus" @click="handleAddTeachingCourse" v-if="$route.query.state == '1'">添加</el-button>
            </e-cell-item>
          </e-cellbox>
        </div>
        <div v-if="isaddTeachingCourse">
          <teaching-course-edit @cancelTeachingCourseAdd="handleCancelTeachingCourseAdd" :thiscourse="thisCourse" :thisCourseId="thisCourseId"></teaching-course-edit>  
        </div>
        <div v-if="courseData.length > 0">
          <div style="position:relative;" class="course_list" v-for="(item, index) in courseData" :key="index" v-if="!item.isEdit">
            <div class="time_tips"><span></span>{{item.times}}min</div>
            <div class="course_list-content">
              <div class="tem_cont">
                <el-row v-for="(sitem, index) in item.processInfo.list" :key="index" v-if="sitem.value">
                  <el-col :span="6" style="text-align:right; padding-right: 30px;">
                    <div class="tab_title">
                      <b>{{sitem.name}}</b>
                      <p class="chart_tip" v-if="sitem.type == 'setRadio'">学生</p>
                      <p class="chart_tip tip_coach" v-if="sitem.type == 'setRadio'">教练</p>
                    </div>
                  </el-col>
                  <el-col :span="15">
                    <div v-if="sitem.type == 'textarea'" v-html="handleFormatTextrea(sitem.valueData)"></div>
                    <div v-if="sitem.type == 'checkbox'">
                      {{sitem.valueData}}
                    </div>
                    <div v-if="sitem.type == 'number'">
                      {{sitem.valueData}} {{sitem.unit}}
                    </div>
                    <div v-if="sitem.type == 'setRadio'">
                      <img :src="['','/static/images/training/s11.png','/static/images/training/s22.png','/static/images/training/s33.png','/static/images/training/s44.png'][sitem.valueData]">
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="lesson_btn" v-if="$route.query.state == '1'">
                <el-button type="text" class="edit_ico" icon="edit" @click="handleEditTeachingCourse(index)">编辑</el-button><br>
                <el-button type="text" class="edit_ico" icon="delete2" @click="handleDelete(item.id)">删除</el-button>
              </div>
            </div>
            <div class="course_list-divider" v-if='index < (courseData.length - 1)'></div>
          </div>
        </div>

        <!--无教学过程-->
       <e-placeholder
          v-if="!isaddTeachingCourse && courseData.length == 0"
          :src="'/static/images/training/no_plan.png'" 
          :text="'点击添加来添加教学过程吧！'" style="width:800px;">
        </e-placeholder>
      </div>
      <!--课后小结-->
      <div class="plan_infocont" v-if="summary.value">
        <div class="plan_show_title">
          <e-cellbox middle class="title-manage">
            <e-cell-item class="planlft">
              <div class="plan_stitle"><span>课后小结</span><i></i></div>
            </e-cell-item>
            <e-cell-item>
              <el-button type="text" :class="['edit_ico', {planbtn_normal: isEditLessonReview}]" icon="edit" @click="handleLessonReviewEdit" v-if="$route.query.state == '1'">编辑</el-button>
            </e-cell-item>
          </e-cellbox>
        </div>
        <div v-if="!isEditLessonReview && isLessonReviewState == 'edit'">
          <div class="tem_cont">
            <el-row v-if="summary.value">
              <el-col :span="3">
                <div class="tab_title">
                  <b>{{summary.name}}</b>
                </div>
              </el-col>
              <el-col :span="21">
                <div v-if="summary.type == 'textarea'" v-html="handleFormatTextrea(summary.valueData)"></div>
              </el-col>
            </el-row>
          </div>
        </div>
        <!--编辑课后小结-->
        <div v-if="isEditLessonReview">
          <Lesson-review-edit 
            @cancelLessonReviewEdit="handleCancelLessonReviewEdit" 
            :summary="summary" 
            :editId="editId" 
            :isLessonReviewState="isLessonReviewState">
          </Lesson-review-edit>
        </div>
        <!--无课后小结-->
        <e-placeholder
          v-if="!isEditLessonReview && isLessonReviewState == 'add'"
          :src="'/static/images/training/no_plan.png'" 
          :text="'点击编辑来填写课后小结吧！'" style="width:800px;">
        </e-placeholder>
      </div>
    </div>
  </div>
</template>
<script>
import TeachingInformationEdit from './components/TeachingInformationEdit'
import LessonReviewEdit from './components/LessonReviewEdit'
import TeachingCourseEdit from './components/TeachingCourseEdit'
import trainApi from 'api/train'
import { formatTextrea } from 'utils/index'
export default {
  components: {
    TeachingInformationEdit,
    LessonReviewEdit,
    TeachingCourseEdit
  },
  created () {
    trainApi.getScheduleTem({
      scheduleId: this.$route.query.scheduleid
    }).then((res) => {
      if (res.data) {
        this.templateData = res.data
        this.getAllCourseInf()
        this.getInformation()
      }
    })
  },
  data () {
    return {
      title: '教案',
      templateData: {
        teachInfo: '{}',
        teachSummary: '{}',
        teachProcess: '{}'
      },
      editId: '',
      isEditTeachingInformation: false,
      isTeachingInformationState: 'add',
      isEditLessonReview: false,
      isLessonReviewState: 'add',
      isaddTeachingCourse: false,
      informationData: {},
      summary: {},
      courseData: [],
      thisCourse: {},
      thisCourseId: 0
    }
  },
  methods: {
    handleFormatTextrea (str) {
      return formatTextrea(str)
    },
    getInformation () { // 教学信息
      trainApi.getScheduleid({
        scheduleId: this.$route.query.scheduleid
      }).then((res) => {
        this.informationData = res.data && res.data.info ? JSON.parse(res.data.info) : JSON.parse(this.templateData.teachInfo)
        this.summary = res.data && res.data.summary ? JSON.parse(res.data.summary) : JSON.parse(this.templateData.teachSummary)
        this.isTeachingInformationState = res.data && res.data.info ? 'edit' : 'add' // 是否新增
        this.isLessonReviewState = res.data && res.data.summary ? 'edit' : 'add'
        this.editId = res.data.id + ''
      })
    },
    getAllCourseInf () { // 教学过程
      trainApi.getAllProcess({
        classScheduleId: this.$route.query.scheduleid
      }).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].processInfo = JSON.parse(res.data[i].processInfo)
          res.data[i].isEdit = false
          for (let item of res.data[i].processInfo.list) {
            if (item.unit === '分钟') {
              res.data[i].times = item.valueData
            }
          }
        }
        this.courseData = res.data
      })
    },
    handleEditTeachingInformation: function () { // 编辑教学信息
      this.isEditTeachingInformation = true
      this.isEditLessonReview = false
      this.isaddTeachingCourse = false
    },
    handleCancelInformationEdit: function () { // 取消编辑教学信息
      this.getInformation()
      this.isEditTeachingInformation = false
    },
    handleLessonReviewEdit: function () { // 编辑课后小结
      this.isEditLessonReview = true
      this.isEditTeachingInformation = false
      this.isaddTeachingCourse = false
    },
    handleCancelLessonReviewEdit: function () { // 取消编辑课后小结
      this.getInformation()
      this.isEditLessonReview = false
    },
    handleAddTeachingCourse: function () { // 添加教学过程
      this.thisCourse = JSON.parse(this.templateData.teachProcess)
      this.thisCourseId = ''
      this.isaddTeachingCourse = true
      this.isEditTeachingInformation = false
      this.isEditLessonReview = false
    },
    handleEditTeachingCourse: function (index) { // 班级单个教学过程
      let id = this.courseData[index].id
      this.thisCourseId = id + ''
      this.isaddTeachingCourse = false
      this.isEditTeachingInformation = false
      this.isEditLessonReview = false
      trainApi.editProcess({
        trainTeachProcessId: id
      }, 'get').then((res) => {
        this.thisCourse = res.data && res.data.processInfo ? JSON.parse(res.data.processInfo) : JSON.parse(this.templateData.teachProcess)
        for (let i = 0; i < this.courseData.length; i++) {
          this.courseData[i].isEdit = false
        }
        this.courseData[index].isEdit = true
        this.isaddTeachingCourse = true
        document.body.scrollTop = document.documentElement.scrollTop = document.getElementById('course_title').offsetTop
      })
    },
    handleCancelTeachingCourseAdd: function () { // 取消添加教学过程
      this.getAllCourseInf()
      this.isaddTeachingCourse = false
      this.thisCourseId = ''
    },
    handleDelete (id) { // 删除教学过程
      this.$confirm('确认删除该条教学过程吗?', '温馨提示', {
        type: 'warning'
      }).then(() => {
        trainApi.editProcess({
          trainTeachProcessId: id
        }, 'delete', {
          successMsg: '删除成功'
        }).then((res) => {
          this.getAllCourseInf()
        })
      }).catch(() => {
        return false
      })
    }
  }
}
</script>
<style lang="scss">

.paln_info_show{
  .plan_infocont{
    margin-bottom:100px;
    .el-row{
      margin-bottom:20px;
    }
    .el-col{
      line-height: 40px;
    }
  }
  .chart_tip{
    text-align: center;
    font-weight:normal;
    position: relative;
    line-height: 26px;
    font-size: 12px;
    &:before{
      position: absolute;
      top:8px;
      left:42px;
      display: table;
      content: "";
      width:10px;
      height:10px;
      background:#00bb90;
    }
  }
  .tip_coach{
    &:before{
      border-radius: 50%;
    }
  }
  .course_list{
    position: relative;
    border-left:2px solid $color-divider;
    .time_tips{
      position: absolute;
      height: 24px;
      left:-4px;
      background: #fff;
      font-weight: bold;
      span{
        display: inline-block;
        vertical-align: middle;
        width:8px;
        height:8px;
        margin-right:5px;
        border-radius: 50%;
        background: $color-black;
      }
    }
    .course_list-content{
      margin-left:50px;
    }
    .course_list-divider{
      border-bottom: 1px solid #f2f2f2;
      background: #fff;
      position: relative;
      left: -2px;
      height: 15px;
      margin-bottom: 35px;
    }
  }
  .remark_text{
    font-size: 12px;
    color:#666;
  }

  .lesson_btn{
    position:absolute;
    right:0;
    top:0;
    .edit_ico{
      padding:10px;
    }
  }
  .plan_show_title{
    height:36px;
    margin-bottom:50px;
    margin-top:50px;
  }
  .edit_ico{
    background: #fff;
    border:none;
    color:#3983e5;
  }
  .planbtn_normal{
    color:#999;
  }
  .tab_title{
    font-weight:bold;
    line-height:36px;
  }
  .tab_cont{
    line-height:36px;
    word-wrap:break-word;
  }
  .title-manage{
    .planlft{
      width:800px;
      position:relative;
      i{
        position:absolute;
        top:18px;
        display:block;
        width:100%;
        height:1px;
        line-height:1px;
        background:#efefef;
        z-index:1;
      }
      span{
        position:absolute;
        left:344px;
        top:0px;
        display:block;
        width:112px;
        height:36px;
        text-align:center;
        line-height:36px;
        font-size:16px;
        background:#eee;
        border-radius:18px;
        z-index:2;
      }
    }
  }
}
</style>
